﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Dream</title>

    <div th:replace="~{/home::css_js}"></div>

</head>
<body>
<div id="wrapper">

    <div th:replace="~{/home::topbar}"></div>

    <div th:replace="~{/home::sidebar}"></div>


    <!--以下是表单样式-->
    <!--以下是表单样式-->
    <!--以下是表单样式-->
    <!--以下是表单样式-->
    <!--以下是表单样式-->
    <div class="main">
        <!-- MAIN CONTENT -->
        <div class="main-content">
            <div class="container-fluid">
                <div id="page-wrapper">
                    <div id="page-inner">
                        <div class="row">
                            <div class="col-md-12">
                                <h1 class="page-header">
                                    Forms Page <small>Best form elements.</small>
                                </h1>
                            </div>
                        </div>
                        <!-- /. ROW  -->
                        <div class="row">
                            <div class="col-lg-12"> <!--把col lg 12宽 分成了 左边6 右边6-->
                                <div class="panel panel-default">
                                    <div class="panel-heading"> <!--panel顶部一整行-->
                                        Basic Form Elements
                                    </div>

                                    <!--panel主体，左边6宽-->
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-lg-6"> <!--form 表单的开始-->
                                                <form role="form">
                                                    <div class="form-group">
                                                        <!--发现，form中的组件都被<div class="form-group"></div>包住了-->
                                                        <label>Text Input</label>
                                                        <input class="form-control">
                                                        <p class="help-block">Example block-level help text here.</p>
                                                    </div>
                                                    <div class="form-group">
                                                        <!--发现，输入文字的，选择的控件<input class="form-control">-->
                                                        <label>Text Input with Placeholder</label>
                                                        <input class="form-control" placeholder="Enter text">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Static Control</label>
                                                        <p class="form-control-static">email@example.com</p>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>File input</label>
                                                        <input type="file">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Text area</label>
                                                        <textarea class="form-control" rows="3"></textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Checkboxes</label>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="">Checkbox 1
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="">Checkbox 2
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="">Checkbox 3
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Inline Checkboxes</label>
                                                        <label class="checkbox-inline">
                                                            <input type="checkbox">1
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="checkbox">2
                                                        </label>
                                                        <label class="checkbox-inline">
                                                            <input type="checkbox">3
                                                        </label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Radio Buttons</label>
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="optionsRadios"
                                                                       id="optionsRadios1" value="option1" checked="">Radio
                                                                1
                                                            </label>
                                                        </div>
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="optionsRadios"
                                                                       id="optionsRadios2" value="option2">Radio 2
                                                            </label>
                                                        </div>
                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="optionsRadios"
                                                                       id="optionsRadios3" value="option3">Radio 3
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Inline Radio Buttons</label>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="optionsRadiosInline"
                                                                   id="optionsRadiosInline1" value="option1" checked="">1
                                                        </label>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="optionsRadiosInline"
                                                                   id="optionsRadiosInline2" value="option2">2
                                                        </label>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="optionsRadiosInline"
                                                                   id="optionsRadiosInline3" value="option3">3
                                                        </label>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Selects</label>
                                                        <select class="form-control">
                                                            <option>1</option>
                                                            <option>2</option>
                                                            <option>3</option>
                                                            <option>4</option>
                                                            <option>5</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Multiple Selects</label>
                                                        <select multiple="" class="form-control">
                                                            <option>1</option>
                                                            <option>2</option>
                                                            <option>3</option>
                                                            <option>4</option>
                                                            <option>5</option>
                                                        </select>
                                                    </div>
                                                    <button type="submit" class="btn btn-default">Submit Button</button>
                                                    <button type="reset" class="btn btn-default">Reset Button</button>
                                                </form>
                                            </div>
                                            <!-- /.col-lg-6 (nested) -->

                                            <!--右边6宽-->
                                            <div class="col-lg-6">
                                                <h4>Disabled Form States</h4>
                                                <form role="form">
                                                    <fieldset disabled="">
                                                        <div class="form-group">
                                                            <label for="disabledSelect">Disabled input</label>
                                                            <input class="form-control" id="disabledInput" type="text"
                                                                   placeholder="Disabled input" disabled="">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="disabledSelect">Disabled select menu</label>
                                                            <select id="disabledSelect" class="form-control">
                                                                <option>Disabled select</option>
                                                            </select>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox">Disabled Checkbox
                                                            </label>
                                                        </div>
                                                        <button type="submit" class="btn btn-primary">Disabled Button
                                                        </button>
                                                    </fieldset>

                                                </form>
                                                <h4>Form Validation States</h4>
                                                <form role="form">
                                                    <div class="form-group has-success">
                                                        <label class="control-label" for="inputSuccess">Input with
                                                            success</label>
                                                        <input type="text" class="form-control" id="inputSuccess">
                                                    </div>
                                                    <div class="form-group has-warning">
                                                        <label class="control-label" for="inputWarning">Input with
                                                            warning</label>
                                                        <input type="text" class="form-control" id="inputWarning">
                                                    </div>
                                                    <div class="form-group has-error">
                                                        <label class="control-label" for="inputError">Input with
                                                            error</label>
                                                        <input type="text" class="form-control" id="inputError">
                                                    </div>
                                                </form>
                                                <h4>Input Groups</h4>
                                                <form role="form">
                                                    <div class="form-group input-group">
                                                        <span class="input-group-addon">@</span>
                                                        <input type="text" class="form-control" placeholder="Username">
                                                    </div>
                                                    <div class="form-group input-group">
                                                        <input type="text" class="form-control">
                                                        <span class="input-group-addon">.00</span>
                                                    </div>
                                                    <div class="form-group input-group">
                                            <span class="input-group-addon"><i class="fa fa-eur"></i>
                                            </span>
                                                        <input type="text" class="form-control"
                                                               placeholder="Font Awesome Icon">
                                                    </div>
                                                    <div class="form-group input-group">
                                                        <span class="input-group-addon">$</span>
                                                        <input type="text" class="form-control">
                                                        <span class="input-group-addon">.00</span>
                                                    </div>
                                                    <div class="form-group input-group">
                                                        <input type="text" class="form-control">
                                                        <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i
                                                        class="fa fa-search"></i>
                                                </button>
                                            </span>
                                                    </div>
                                                </form>
                                            </div>
                                            <!-- /.col-lg-6 (nested) -->
                                        </div>
                                        <!-- /.row (nested) -->
                                    </div>
                                    <!-- /.panel-body -->
                                </div>
                                <!-- /.panel -->
                            </div>
                            <!-- /.col-lg-12 -->
                        </div>
                        <footer>
                            <p>Copyright &copy; 2016.Company name All rights reserved.
                                <a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                        </p></footer>
                    </div>
                    <!-- /. PAGE INNER  -->
                </div>
                <!-- /. PAGE WRAPPER  -->
            </div>
            <!-- /. WRAPPER  -->
        </div>
    </div>
</div>


</body>
</html>
